<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网上订单</title>
<style type="text/css">
body{
	font-size:13px;
	line-height:25px;
	}
table{
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	width:400px;
}
td{
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align:center;
	}
.title{	
	font-weight:bold;
	background-color: #cccccc;
}
#itemsNumber,#itemsPrice{
	width: 25px;
}
</style>
</head>
<body>
	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="order">
		<tr class="title">
			<td>商品名称</td>
			<td>数量</td>
			<td>单价</td>
			<td>操作</td>
		</tr>
		<tr>
			<td style="text-align:center; height:30px;" colspan="4">
				<input name="bsn" type="button" value="增加定单" onclick="addRow()"/>
			</td>
		</tr>
	</table>
<script>
	const All = document.getElementById("order");
	const itemsName = "<input id='itemsName' type='text'>";
	const itemsNumber = "<input id='itemsNumber' type='text'>";
	const itemsPrice = "<input id='itemsPrice' type='text'>";
	const qrBtn = "<input type='button' value='确认' onclick='qr(this)'/>";
	const sx = '<input class="del" type="button" value="删除" onclick="del(this)"/><input name="modifys" type="button" value="修改" onclick="xg(this)"/>';
	function addRow() {
		const lengths = document.getElementById("order").rows.length;
		let index;
		//判断插入行的位置
		if (lengths >= 2) {
			index = lengths - 1;
		}
		else {
			index = 1;
		}
		//循环插入列
		let newRow = document.getElementById("order").insertRow(index);
		const items = [itemsName,itemsNumber,itemsPrice,qrBtn];
		for(let x = 0;x <= 3;x++){
			let y = newRow.insertCell(x);
			y.innerHTML = items[x];
		}
	}
	//修改行内容
	function xg(t) {
		const alltd = t.parentNode.parentNode.childNodes;
		const allitem = ["<input id='itemsName' type='text' value='","<input id='itemsNumber' type='text' value='","<input id='itemsPrice' type='text' value='"]
		for (let x = 0; x < alltd.length-1; x++) {//循环生成四个子节点td  并且嵌入内容
			alltd[x].innerHTML=allitem[x]+alltd[x].innerHTML+"'>";
		}
		alltd[alltd.length-1].innerHTML = qrBtn;
	}
	//提交修改的内容
	function qr(t) {
		const alltd = t.parentNode.parentNode.childNodes;//找到爷级的节点并操作其子节点
		//获取输入框内的dom节点内容值
		const Allitem = [document.getElementById('itemsName').value,document.getElementById('itemsNumber').value,document.getElementById('itemsPrice').value];
		for (let x = 0; x < alltd.length-1; x++) {//循环生成四个子节点td  并且嵌入内容
			alltd[x].innerHTML=Allitem[x];
		}
		alltd[alltd.length-1].innerHTML = sx;
	}
	//删除行
	function del(t) {
		All.deleteRow(t.parentNode.parentNode.rowIndex);
	};
</script>
</body>
</html>
